<div class="page">
  <div class="navbar">
    <div class="navbar-inner sliding">
      <div class="left">
        <a href="#" class="link back">
          <i class="icon icon-back"></i>
          <span class="if-not-md">Back</span>
        </a>
      </div>
      <div class="title">Buttons</div>
    </div>
  </div>

  <div class="page-content">
    <div class="block-title">Usual Buttons</div>
    <div class="block">
      <div class="row">
        <button class="button col">Button</button>
        <button class="button col">Button</button>
        <button class="button col button-round">Round</button>
      </div>
    </div>
    <div class="block-title">Fill Buttons</div>
    <div class="block">
      <div class="row">
        <button class="col button button-fill">Button</button>
        <button class="col button button-fill">Button</button>
        <button class="col button button-fill button-round">Round</button>
      </div>
    </div>
    <div class="block-title">Outline Buttons</div>
    <div class="block">
      <div class="row">
        <button class="col button button-outline">Button</button>
        <button class="col button button-outline">Button</button>
        <button class="col button button-outline button-round">Round</button>
      </div>
    </div>
    <div class="block-title">Raised Buttons</div>
    <div class="block">
      <p class="row">
        <button class="col button button-raised">Button</button>
        <button class="col button button-raised button-fill">Fill</button>
        <button class="col button button-outline button-raised">Outline</button>
      </p>
      <p class="row">
        <button class="col button button-raised button-round">Round</button>
        <button class="col button button-raised button-fill button-round">Fill</button>
        <button class="col button button-outline button-round button-raised">Outline</button>
      </p>
    </div>
    <div class="block-title">Segmented</div>
    <div class="block">
      <p class="segmented segmented-raised">
        <button class="button">Button</button>
        <button class="button">Button</button>
        <button class="button button-active">Active</button>
      </p>
      <p class="segmented">
        <button class="button button-outline">Outline</button>
        <button class="button button-outline">Outline</button>
        <button class="button button-outline button-active">Active</button>
      </p>
      <p class="segmented segmented-raised segmented-round">
        <button class="button button-round">Button</button>
        <button class="button button-round">Button</button>
        <button class="button button-round button-active">Active</button>
      </p>
      <p class="segmented segmented-round">
        <button class="button button-round button-outline">Outline</button>
        <button class="button button-round button-outline">Outline</button>
        <button class="button button-round button-outline button-active">Active</button>
      </p>
    </div>

    <div class="block-title">Large Buttons</div>
    <div class="block">
      <p class="row">
        <button class="col button button-large">Button</button>
        <button class="col button button-large button-fill">Fill</button>
      </p>
      <p class="row">
        <button class="col button button-large button-raised">Raised</button>
        <button class="col button button-large button-raised button-fill">Raised Fill</button>
      </p>
      <p class="row">
        <button class="col button button-large button-round">Round</button>
        <button class="col button button-large button-round button-fill">Round Fill</button>
      </p>
    </div>

    <div class="block-title">Small Buttons</div>
    <div class="block">
      <p class="row">
        <button class="col button button-small">Button</button>
        <button class="col button button-small button-outline">Outline</button>
        <button class="col button button-small button-fill">Fill</button>
      </p>
      <p class="row">
        <button class="col button button-small button-round">Button</button>
        <button class="col button button-small button-round button-outline">Outline</button>
        <button class="col button button-small button-round button-fill">Fill</button>
      </p>
    </div>
    <div class="block-title">Color Buttons</div>
    <div class="block">
      <p class="row">
        <button class="col button color-red">Red</button>
        <button class="col button color-green">Green</button>
        <button class="col button color-blue">Blue</button>
      </p>
      <p class="row">
        <button class="col button color-pink">Pink</button>
        <button class="col button color-yellow">Yellow</button>
        <button class="col button color-orange">Orange</button>
      </p>
      <p class="row">
        <button class="col button color-gray">Gray</button>
        <button class="col button color-black">Black</button>
      </p>
    </div>
    <div class="block-title">Color Fill Buttons</div>
    <div class="block">
      <p class="row">
        <button class="col button button-fill color-red">Red</button>
        <button class="col button button-fill color-green">Green</button>
        <button class="col button button-fill color-blue">Blue</button>
      </p>
      <p class="row">
        <button class="col button button-fill color-pink">Pink</button>
        <button class="col button button-fill color-yellow">Yellow</button>
        <button class="col button button-fill color-orange">Orange</button>
      </p>
      <p class="row">
        <button class="col button button-fill color-gray">Gray</button>
        <button class="col button button-fill color-black">Black</button>
        <button class="col button button-fill color-white text-color-black">White</button>
      </p>
    </div>
    <div class="block-title">List-Block Buttons</div>
    <div class="list inset">
      <ul>
        <li><a href="#" class="list-button">List Button 1</a></li>
        <li><a href="#" class="list-button">List Button 2</a></li>
        <li><a href="#" class="list-button">List Button 2</a></li>
      </ul>
    </div>
    <div class="list inset">
      <ul>
        <li><a href="#" class="list-button color-red">Large Red Button</a></li>
      </ul>
    </div>
  </div>
</div>
